<template>
	<view class="step3-container">
		<view class="box">
			<view class="title no-border-bottom">配送信息</view>
			<view class="info-list">
				<view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.deliveried : 0}}</text>
					<text class="t">已发车</text>
				</view>
				<!-- <view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.toBedeliveried : 0}}</text>
					<text class="t">待发车</text>
				</view> -->
				<view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.verifiedWeight : 0}}<text class="tips">t</text></text>
					<text class="t">已收货</text>
				</view>
				<!-- <view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.toBeverifiedWeight : 0}}<text class="tips">t</text></text>
					<text class="t">待收总量</text>
				</view> -->
			</view>
		</view>
		<view class="box">
			<view class="title">订单信息</view>
			<view class="list">
				<view class="item">
					<text class="label">订单编号：</text>
					<text class="value u-line-1">{{detail.num}}</text>
				</view>
				<view class="item">
					<text class="label">物料类型：</text>
					<text class="value u-line-1">{{detail.skuName}}</text>
				</view>
				<view class="item">
					<text class="label">预算量：</text>
					<text class="value u-line-1">{{detail.totalBudget}}t</text>
				</view>
				<view class="item">
					<text class="label">卸货位置：</text>
					<text class="value u-line-1">{{detail.locationName}}</text>
				</view>
			</view>
		</view>
		<view class="car-box">
			<view class="title">发货批次</view>
			<view class="all">共计：<text>{{carList.length}}</text>车</view>
		</view>
		<view class="car-list">
			<view class="item" v-for="(item,index) in carList" :key="index" @click="showCarDetail(index)">
				<view class="item-body">
					<view class="item-hd">
						<text class="number">{{item.plateNumber}}</text>
					</view>
					<view class="item-bd">
						<view class="bd-l">
							<view>
								<text class="label">进磅：</text>
								<text class="value">{{item.grossWeight ? item.grossWeight + 't' : '-'}}</text>
								<text class="label">出磅：</text>
								<text class="value">{{item.tareWeight ? item.tareWeight + 't' : '-'}}</text>
								<text class="label">实重：</text>
								<text class="value">{{item.realWeight ? item.realWeight + 't' : '-'}}</text>
							</view>
						</view>
						<view class="status success">已收货</view>
					</view>
				</view>
			</view>
		</view>
		<view class="op-box">
			<view class="btn" @click="submit" v-if="$_bauth('acceptance_create')">申请结算</view>
		</view>
		
		<!-- 弹出详情 -->
		<u-popup mode="center" border-radius="12" width="650" v-model="carDetailShow">
			<view class="cae-detail-name">{{truckDetail.plateNumber}}</view>
			<view class="car-detail-list">
				<text class="label">扫码时间：</text>
				<text class="value">{{truckDetail.scanTime}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">进磅时间：</text>
				<text class="value">{{truckDetail.entryTime || '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">进磅重量：</text>
				<text class="value">{{truckDetail.grossWeight ? truckDetail.grossWeight + 't' : '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">出磅时间：</text>
				<text class="value">{{truckDetail.outerTime || '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">出磅重量：</text>
				<text class="value">{{truckDetail.tareWeight ? truckDetail.tareWeight + 't' : '-'}}</text>
			</view>
			
			<view class="car-detail-list">
				<text class="label">实际重量：</text>
				<text class="value">{{truckDetail.realWeight ? truckDetail.realWeight + 't' : '-'}}</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		props:{
			orderId:{
				type: String,
				default: null
			},
			detail:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return{
				carDetailShow:false,
				carList:[],
				truckDetail:null,
				upOption:{
					empty:{
						tip:'暂无数据'
					}
				}
			}
		},
		watch:{
			detail:{
				handler(v){
					if(v) this.refresh()
				},
				immediate:true
			}
		},
		methods:{
			//下拉刷新
			refresh(){
				let curPageData = this.detail.records;
				let arr = []
				curPageData.map(item => {
					if(item.status == 3) arr.push(item)
				})
				this.carList = arr;
			},
			
			//拨打电话
			call(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			//车辆详情
			showCarDetail(index){
				this.truckDetail = this.carList[index]
				this.carDetailShow = true
			},
			//申请结算
			submit(){
				uni.showModal({
					content:"确定提交验收当前订单？",
					success: (res) => {
						if(res.confirm){
							uni.showLoading({mask:true})
							this.$u.api.applyOrder({id:this.orderId}).then(res => {
								if(res.code == 0){
									uni.hideLoading()
									this.$u.toast('提交成功')
									
									uni.navigateBack({
										delta:1
									})
								}else{
									uni.hideLoading()
									this.$u.toast(res.msg)
								}
							}).catch(()=>{uni.hideLoading()})
						}
					}
				})
			},
			previewImage(){
				uni.previewImage({
					urls:this.truckDetail.images.split(','),
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step3-container{
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}
	.box{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		.title{
			font-size: 34rpx;
			font-weight: 800;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			padding-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&.no-border-bottom{
				border-bottom: none;
			}
		}
		.list{
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				.label{
					color: #798188;
				}
				.value{
					color:#333;
					max-width: 400rpx;
					.tel{
						margin-left: 20rpx;
						color: #1378FF;
					}
				}
			}
		}
		.concrete-list{
			.c-item{
				display: flex;
				flex-direction: column;
				padding: 20rpx 0;
				border-bottom:1px solid rgba(188, 198, 218, 0.3);
				.name{
					font-size: 28rpx;
					color: #1378FF;
					margin-bottom: 12rpx;
				}
				.bd{
					display: flex;
					align-items: center;
					view{
						width: 50%;
						font-size: 24rpx;
						color: #666D7F;
						text{
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
			.summary{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 24rpx;
				.t{
					font-size: 34rpx;
					font-weight: 600;
				}
				.v{
					font-size: 34rpx;
					font-weight: 600;
					color: #1378FF;
				}
			}
		}
		.info-list{
			display: flex;
			.item{
				width: 50%;
				display: flex;
				flex-direction: column;
				border-right: 1px solid rgba(212, 226, 237, 0.6);
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				&:last-child{
					border-right: none;
					margin-right: 0;
				}
				.v{
					font-size: 36rpx;
					font-weight: 500;
					color: #FF6600;
					.tips{
						font-size: 26rpx;
						margin-left: 3px;
					}
				}
				.t{
					font-size: 24rpx;
					color: #888;
					margin-top: 6rpx;
					
				}
			}
		}
	}
	.car-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-top: 10rpx;
		.title{
			font-size: 34rpx;
			font-weight: 600;
		}
		.all{
			font-size: 28rpx;
			color: #666D7F;
			text{
				color: #137AFF;
			}
		}
	}
	.car-list{
		
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding:20rpx;
			position: relative;
			.status{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 16rpx;
				height: 40rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 20rpx;
				right: 0;
				top: 0;
				&.primary{
					background: rgba(19, 120, 255, 0.1);
					color: #1378FF;
				}
				&.success{
					background: rgba(39, 183, 16, 0.1);
					color: #27B710;
				}
				&.error{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.warning{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.info{
					background: rgba(144, 147, 153,0.1);
					color: #909399;
				}
			}
		}
		.item-body{
			flex: 1;
		}
		.item-hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6rpx;
			.number{
				font-size: 28rpx;
				font-weight: 600;
			}
			.startTime{
				font-size: 26rpx;
				color: #666D7F;
			}
		}
		.item-bd{
			display: flex;
			align-items: center;
			.bd-l{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				view{margin-top: 12rpx;}
				.label{
					color: #999;
					font-size: 24rpx;
				}
				.value{
					font-size: 26rpx;
					margin-right: 24rpx;
				}
			}
			.bd-r{
				width: 56rpx;
				height: 56rpx;
				background: linear-gradient(148deg, #FCA726 0%, #FF6E28 100%);
				border-radius: 100%;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}
	.op-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:14rpx 30rpx 0;
		padding-bottom:calc(14rpx + env(safe-area-inset-bottom)); 
		box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.15);
		.btn{
			height: 82rpx;
			background: #1378FF;
			border-radius: 16rpx;
			line-height: 82rpx;
			font-size: 34rpx;
			color: #fff;
			width: 100%;
			text-align: center;
		}
	}
	
	.cae-detail-name{
		font-size: 34rpx;
		font-weight: 600;
		padding: 30rpx 30rpx;
	}
	.car-detail-list{
		padding: 0 30rpx 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		.label{
			color: #666D7F;
		}
		.value{
			color: #333;
		}
		.link{
			color: #1378FF;
		}
		&:last-child{
			padding-bottom: 30rpx;
		}
	}
</style>